<!--
 * @Author: your name
 * @Date: 2020-10-07 17:20:02
 * @LastEditTime: 2020-10-08 14:32:01
 * @LastEditors: YoungWind
 * @Description: In User Settings Edit
 * @FilePath: \ccd3\src\ccd3\line\index.html
-->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="../../css/root.css" />
		<link rel="stylesheet" href="../../css/grid.css" />
		<script src="../../../libs/d3/d3.v6.js"></script>
	</head>
	<body>
		<h1>折线图</h1>

		<main class="container">
			<section>
				<h2>折线图</h2>
				<select id="lineChartSelect">
					<option value="0">1月份</option>
					<option value="1">2月份</option>
					<option value="2">3月份</option>
					<option value="3">4月份</option>
					<option value="4">5月份</option>
					<option value="5">6月份</option>
					<option value="6">7月份</option>
					<option value="7">8月份</option>
					<option value="8">9月份</option>
					<option value="9">10月份</option>
					<option value="10">11月份</option>
					<option value="11">12月份</option>
				</select>
				<div id="lineChart" style="height: 50vh"></div>
			</section>
		</main>

		<script type="module">
			import { LineChart } from '../../dist/ccd3.js'

			const lineChart = new LineChart('lineChart')
				.setMargin(25, 25, 25, 50)
				.setXAxisKey('day')
				.setYAxisKey('times')
				.setColor('steelblue')
				.init()

			d3.json('./data/LineChart.json').then((data) => {
				let index = 0
				lineChart.render(data[index].data)
				document.querySelector('#lineChartSelect').addEventListener('change', (event) => {
					index = event.target.value
					lineChart.render(data[index].data)
				})
			})
		</script>
	</body>
</html>
